<template>
  <a-modal :width="500" v-model:visible="showEditDialog" title="调整竞价" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <a-radio-group v-model="tabType">
      <a-radio :value="1">当前竞价</a-radio>
      <a-radio :value="2">自定义竞价</a-radio>
    </a-radio-group>
    <div style="margin-top: 20px">
      <a-input-group v-if="tabType === 1">
        <a-select v-model="adjustType" style="width: 120px">
          <a-option value="PERCENTAGE_INCREASE" label="提高（%）" />
          <a-option value="AMOUNT_INCREASE" label="提高（金额）" />
          <a-option value="PERCENTAGE_DECREASE" label="降低（%）" />
          <a-option value="AMOUNT_DECREASE" label="降低（金额）" />
        </a-select>
        <a-input-number v-model="bid" style="width: 200px" placeholder="请输入 " />
      </a-input-group>
      <a-input-number v-else v-model="bid" style="width: 200px" placeholder="请输入竞价金额" :min="0.02" :max="1000" />
    </div>
    <div class="info">
      <p class="flex-c"><span class="dot"></span><span>竞价调整金额最低0.02，最高1000</span></p>
      <p class="flex-c"><span class="dot"></span><span>竞价调整四舍五入精确到小数点后两位数</span></p>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { updateAdGroup, updateKeyword, targetingAdjust } from '@/api/advert'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: 'adGroup',
    },
  })

  const showEditDialog = ref(props.isShow)
  const tabType = ref(1)
  const adjustType = ref('PERCENTAGE_INCREASE')
  const bid = ref()
  const submitLoading = ref(false)
  const apiMap = {
    adGroup: updateAdGroup,
    keyword: updateKeyword,
    targeting: targetingAdjust,
  }

  // 关闭
  function closedDialog() {
    showEditDialog.value = false
    emit('closed')
  }
  // 提交
  async function submitData() {
    if (!bid.value) {
      Message.error('请输入竞价')
      return false
    }
    let _adjustType = tabType.value === 2 ? 'FIXED_AMOUNT_VALUE' : adjustType.value
    let params = props.list.map((el: any) => {
      let obj: any = {
        adGroupId: el.adGroupId,
        campaignId: el.campaignId,
        adType: el.adType,
        shopId: el.shopId,
        adjustType: _adjustType,
        bid: bid.value,
      }
      if (props.type === 'keyword') {
        obj.keywordId = el.keywordId
      }
      if (props.type === 'targeting') {
        obj.targetId = el.targetId
      }
      return obj
    })
    const res: any = await apiMap[props.type](params)
    if (!res) return false
    Message.success('设置成功')
    emit('success')
    closedDialog()
  }
</script>
<style lang="less" scoped>
  .info {
    margin-top: 40px;
    font-size: 12px;
    color: #999;
    .dot {
      display: inline-block;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #666;
      margin-right: 4px;
    }
  }
</style>
